{% extends "website/staff/staff_base.html" %}
{% block content %}
<h1 style="margin:0;">SLA Breaches</h1>
<div style="opacity:.75;margin-top:4px;">Overdue items where no first response was recorded.</div>

<div class="bulk-bar" style="margin-top:12px;">
  <a class="btn btn-dark" href="/staff/sla/?notify=1">Send breach alerts (Email/WhatsApp)</a>
  <span style="opacity:.75;">Uses ADMIN_NOTIFY_EMAIL and optional ADMIN_WHATSAPP_NUMBER.</span>
</div>

<div class="olutech-card" style="margin-top:14px;">
  <div style="font-weight:800;margin-bottom:10px;">Support ticket breaches</div>
  <div class="table-sticky">
    <table class="table">
      <thead><tr><th>Ticket</th><th>Subject</th><th>Assigned</th><th>Due</th><th>Status</th></tr></thead>
      <tbody>
        {% for t in support_breaches %}
          <tr>
            <td>#{{ t.public_id }}</td>
            <td>{{ t.subject }}</td>
            <td>{{ t.assigned_to.username|default:"Unassigned" }}</td>
            <td>{{ t.due_at }}</td>
            <td>{{ t.status }}</td>
          </tr>
        {% empty %}
          <tr><td colspan="5" style="opacity:.7;">No support SLA breaches.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<div class="olutech-card" style="margin-top:14px;">
  <div style="font-weight:800;margin-bottom:10px;">Care request breaches</div>
  <div class="table-sticky">
    <table class="table">
      <thead><tr><th>ID</th><th>Client</th><th>Type</th><th>Assigned</th><th>Due</th></tr></thead>
      <tbody>
        {% for r,due in care_breaches %}
          <tr>
            <td>#{{ r.id }}</td>
            <td>{{ r.full_name }}</td>
            <td>{{ r.request_type }}</td>
            <td>{{ r.assigned_to.username|default:"Unassigned" }}</td>
            <td>{{ due }}</td>
          </tr>
        {% empty %}
          <tr><td colspan="5" style="opacity:.7;">No care SLA breaches.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}